{template 'common/header'}
<div class="account-list-add-step" id="js-wxapp-create" ng-controller="MainCtrl" ng-cloak>
	<ol class="breadcrumb we7-breadcrumb">
		<a href="{php echo url ('account/manage')}"><i class="wi wi-back-circle"></i></a>
		<li><a href="{php echo url ('account/manage')}">平台列表</a></li>
		<li>新建小程序</li>
	</ol>
	<ul class="we7-step">
		<li class="new" ng-class="createStep == 1 ? 'active': ''"><span class="content">1. 设置小程序信息</span></li>
		<li class="new" ng-class="createStep == 3 ? 'active': ''" ng-if="create_type == 2"><span class="content">2. 设计首页</span> </li>
		<li class="new " ng-class="createStep == 4 ? 'active': ''"><span class="content">{{create_type == 2 ? 3 : 2}}. 生成版本</span> </li>
	</ul>
	<form method="post" ng-submit="package()">
		<input name="token" type="hidden" value="{$_W['token']}" />
		<div class="panel panel-app">
			<div class="panel-body">
				<div class="wxapp-content tab-content" style="width: 100%;">
					<div id="select" ng-show="createStep == 1">
						<div class="form-defalut we7-form">
							{if empty($uniacid)}
							<div class="form-group">
								<label for="" class="control-label col-sm-2">小程序名称</label>
								<div class="form-controls col-sm-10">
									<input type="text" name="name" ng-model="wxappinfo.name" class="form-control wxapp-name" placeholder="小程序名称">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-sm-2">小程序描述</label>
								<div class="form-controls col-sm-10">
									<input type="text" name="description" ng-model="wxappinfo.description" class="form-control wxapp-name" placeholder="版本描述">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-sm-2">原始ID</label>
								<div class="form-controls col-sm-10">
									<input type="text" name="original" ng-model="wxappinfo.original" value="" class="form-control wxapp-name" placeholder="原始ID">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-sm-2">AppId</label>
								<div class="form-controls col-sm-10">
									<input type="text" name="key" value="" ng-model="wxappinfo.appid" class="form-control wxapp-name" placeholder="AppId">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-sm-2">AppSecret</label>
								<div class="form-controls col-sm-10">
									<input type="text" name="secret" value="" ng-model="wxappinfo.appsecret" class="form-control wxapp-name" placeholder="AppSecret">
								</div>
							</div>
							{else}
							<div class="form-group">
								<label for="" class="control-label col-sm-2">版本描述</label>
								<div class="form-controls col-sm-10">
									<input type="text" name="description" ng-model="wxappinfo.description" class="form-control wxapp-name" placeholder="版本描述">
								</div>
							</div>
							{/if}
							<div class="form-group">
								<label for="" class="control-label col-sm-2">版本号</label>
								<div class="form-controls col-sm-10">
									<input type="text" name="version" ng-model="wxappinfo.version" class="form-control wxapp-name" placeholder="版本号，只能是数字、点，数字最多两位，例如 1.01 / 1.0.1">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-sm-2">头像</label>
								<div class="form-controls col-sm-8">
									<div class="input-more we7-input-img" ng-class="{'active': wxappinfo.headimg}">
										<img ng-src="{{wxappinfo.headimg}}" width="150px" ng-if="wxappinfo.headimg" ng-style="{'height': 'auto'}">
										<a href="javascript:;" class="input-addon" ng-click="uploadMultiImage('headimg')" ng-hide="wxappinfo.headimg"><span>+</span></a>
										<input type="text" name="headimg" ng-model="wxappinfo.headimg" ng-style="{'display' : 'none'}">
										<div class="cover-dark">
											<a href="javascript:;" class="cut" ng-click="uploadMultiImage('headimg')">更换</a>
											<a href="javascript:;" class="del" ng-click="delMultiImage('headimg')"><i class="fa fa-times text-danger"></i></a>
										</div>
									</div>
									<span class="help-block"></span>
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-sm-2">二维码</label>
								<div class="form-controls col-sm-8">
									<div class="input-more we7-input-img" ng-class="{'active': wxappinfo.qrcode}">
										<img ng-src="{{wxappinfo.qrcode}}" width="150px" ng-if="wxappinfo.qrcode" ng-style="{'height': 'auto'}">
										<a href="javascript:;" class="input-addon" ng-click="uploadMultiImage('qrcode')" ng-hide="wxappinfo.qrcode"><span>+</span></a>
										<input type="text" name="qrcode" ng-model="wxappinfo.qrcode" ng-style="{'display' : 'none'}">
										<div class="cover-dark">
											<a href="javascript:;" class="cut" ng-click="uploadMultiImage('qrcode')">更换</a>
											<a href="javascript:;" class="del" ng-click="delMultiImage('qrcode')"><i class="fa fa-times text-danger"></i></a>
										</div>
									</div>
									<span class="help-block"></span>
								</div>
							</div>
							<div class="form-group">
								<input type="hidden" name="modules" value="">
								<label class="control-label col-sm-2">添加应用</label>
								<div class="form-controls col-sm-10">

									<ul class="app-list" id="resource_module">
										<div class="app-info" ng-repeat="module in wxappinfo.choose.modules">
											<img ng-src="{{module.icon}}" />
											<p>{{module.title}}</p>
										</div>
										<li class="select select-more"></li>
									</ul>

								</div>
							</div>
						</div>
					</div>
					<div id="home" ng-show="createStep == 2">
						<!-- 选择模板 -->
						<div ng-if="designMethod == 2">
							<div class="wxapp-tem-preview">
								<div class="wxapp-phone">
									<img src="./resource/images/iphone6.png" alt="" class="wxapp-phone-bg" />
									<div class="wxapp-home-preview">
										<img src="./resource/images/wxapp-default-tpl1.jpg" />
									</div>

								</div>
								<div class="panel panel-app tem-detail">
									<div class="panel-heading">
										模板功能
									</div>
									<div class="panel-body">
										<div class="tem-detail-heading">
											本模板包含以下功能
										</div>
										<div class="tem-detail-content">
											<ul>
												<li>更换幻灯片</li>
												<li>更换顶部小图标</li>
												<li>上传推荐图文</li>
											</ul>
										</div>
									</div>
								</div>
							</div>

							<div class="creat-select-tem">
								<div class="select-tem-heading">
									选择模板
								</div>
								<div class="select-tem-filter">
									<div class="form-group" style="display:none;">
										<select name="" class="select-we7">
											<option value="">全部分类</option>
											<option value="">分类1</option>
											<option value="">分类2</option>
										</select>
									</div>
									<div class="input-group" style="display:none;">
										<input type="text" name="" class="form-control" placeholder="输入模板名">
										<span class="input-group-addon"><i class="fa fa-search"></i></span>
									</div>
								</div>
								<div class="select-tem-list">
									<input type="hidden" name="template" ng-model="wxappinfo.choose.template" />
									<ul>
										<li class="select-tem-item" ng-class="{'active' : wxappinfo.choose.template == '1'}" ng-click="selectTpl(1)">
											<img src="./resource/images/wxapp-default-tpl0.jpg"/>
											<a href="javascript:;" class="cover-dark">
												<i class="fa fa-check cover-selected"></i>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div id="bottom" ng-show="createStep == 3">

						<div class="wxapp-tem-preview wxapp-buttom-preview">
							<div class="wxapp-phone">
								<img src="./resource/images/iphone6.png" alt="" class="wxapp-phone-bg" />
								<div class="wxapp-home-preview">
									<div class="box clearfix">
										<div class="item pic" ng-repeat="module in wxappinfo.choose.modules">
											<a href="javascript:void(0)">
												<i style="background-image:url({{module.icon}});"></i>
												<div class="name">{{module.title}}</div>
											</a>
										</div>

									</div>
									<div class="buttom-list-preview" ng-style="{'background-color': wxappinfo.quickmenu.bottom.bgcolor}">
										<ul ng-style="{'border-top': '1px solid'+wxappinfo.quickmenu.bottom.boundary}">
											<li ng-repeat="menu in wxappinfo.quickmenu.menus">
												<img ng-src="{{menu.defaultImage}}" class="buttom-preview-img"/>
												<p class="buttom-preview-title" ng-bind="menu.name" ng-style="{'font-size':'12px', 'color': wxappinfo.quickmenu.bottom.color}"></p>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>

						<div class="creat-buttom">
							<div class="buttom-heading">
								配置
							</div>
							<div class="creat-buttom-select form-defalut">
								<div class="form-group">
									<label for="" class="control-label col-sm-3">是否显示</label>
									<div class="form-controls col-sm-9">
										<label><input name="" id="" class="form-control" type="checkbox" style="display: none;">
											<div class="switch" ng-class="{'switchOn': wxappinfo.quickmenu.show}" ng-click="showMenu()"></div>
										</label>
									</div>
								</div>
								<div class="form-group buttom-bg-color">
									<label for="" class="control-label col-sm-3">背景颜色</label>
									<div class="form-controls col-sm-4" >
										<div we7-colorpicker we7-form-name="wxappinfo.quickmenu.bottom.bgcolor" we7-my-color="wxappinfo.quickmenu.bottom.bgcolor" we7-my-default-color="bottom.bgcolor"></div>
									</div>
								</div>
								<div class="form-group buttom-boundary-color">
									<label for="" class="control-label col-sm-3">交界线颜色</label>
									<div class="form-controls col-sm-4" >
										<div we7-colorpicker we7-my-color="wxappinfo.quickmenu.bottom.boundary" we7-my-default-color="wxappinfo.quickmenu.bottom.boundary"></div>
									</div>
								</div>
								<div class="form-group buttom-bg-color">
									<label for="" class="control-label col-sm-3">文字默认颜色</label>
									<div class="form-controls col-sm-4" >
										<div we7-colorpicker we7-my-color="wxappinfo.quickmenu.bottom.color" we7-my-default-color="wxappinfo.quickmenu.bottom.color"></div>
									</div>
								</div>
								<div class="form-group buttom-bg-color">
									<label for="" class="control-label col-sm-3">文字选中颜色</label>
									<div class="form-controls col-sm-4" >
										<div we7-colorpicker we7-my-color="wxappinfo.quickmenu.bottom.selectedColor" we7-my-default-color="wxappinfo.quickmenu.bottom.selectedColor"></div>
									</div>
								</div>

							</div>
							<div class="buttom-list">
								<table class="table we7-table buttom-list-table vertical-middle">
									<col width="70" />
									<col width="70" />
									<col width="100" />
									<col width="120" />
									<col width="70" />
									<tr>
										<th>默认</th>
										<th>选中</th>
										<th>菜单名称</th>
										<th>跳转到</th>
										<th>操作</th>
									</tr>
									<tr ng-repeat="menu in wxappinfo.quickmenu.menus" class="we7-form">
										<td>
											<div class="nav-img-box">
												<img ng-src="{{menu.defaultImage}}" >
												<div ng-click="addDefaultImg($index)" class="select">选择</div>

											</div>
										</td>
										<td>
											<div class="nav-img-box">
												<img ng-src="{{menu.selectedImage}}">
												<div ng-click="addSelectedImg($index)" class="select">选择</div>

											</div>
										</td>
										<td>
											<input type="text" name="menuname" ng-model="menu.name" class="form-control" />
										</td>

										<td>
											<select class="form-control" id="lineheight" ng-model="menu.defaultentry" ng-options="binding.title group by binding.modulename for binding in module_bindings">
											</select>
										</td>
										<td>
											<a href="javascript:;" class="buttom-del" ng-click="delMenu($index)"><i class="fa fa-times-circle"></i></a>
										</td>
									</tr>
									<tr class="buttom-more">
										<td colspan="5"><a href="javascript:;" class="buttom-add" ng-click="addMenu()">+</a></td>
									</tr>
								</table>
							</div>
							<div class="buttom-list">
								<table class="table we7-table buttom-list-table vertical-middle">
									<col width="70" />
									<col width="70" />
									<col width="120" />
									<tr>
										<th>默认</th>
										<th>模块名</th>
										<th>跳转到</th>
									</tr>
									<tr ng-repeat="module in wxappinfo.choose.modules" class="we7-form">
										<td>
											<div class="nav-img-box">
												<img ng-src="{{module.newicon ? module.newicon : module.icon}}" >
												<div ng-click="addModuleImage(module)" class="select">选择</div>

											</div>
										</td>
										<td>
											<input type="text" name="modulename" ng-model="module.title" class="form-control" readonly />
										</td>
										<td>
											<select class="form-control" id="lineheight1"
													ng-model="module.defaultentry"
													ng-options="binding.eid as binding.title for binding in module.bindings">
											</select>
										</td>

									</tr>
								</table>
							</div>
						</div>
					</div>
					<div id="finish" ng-show="createStep == 4">
						<div class="form we7-form wxapp-finish">
							<div class="form-group">
								<label for="" class="control-label col-sm-2">小程序名称</label>
								<div class="form-controls col-sm-10">
									<p class="form-control-static" ng-bind="wxappinfo.name"></p>
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-sm-2">描述</label>
								<div class="form-controls col-sm-10">
									<p class="form-control-static" ng-bind="wxappinfo.description"></p>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-sm-2">版本号</label>
								<div class="form-controls col-sm-10">
									<p class="form-control-static">{{wxappinfo.version}}</p>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-sm-2">打包应用</label>
								<div class="form-controls col-sm-10">
									<ul class="app-list">
										<li class="select" ng-repeat="module in wxappinfo.choose.modules">
											<div class="app-info">
												<img ng-src="{{module.icon}}" />
												<p>{{module.title}}</p>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="form-group" ng-if="designMethod == 2">
								<label class="control-label col-sm-2">首页模板</label>
								<div class="form-controls col-sm-10">
									<p class="form-control-static" ng-bind="wxappinfo.choose.template"></p>
								</div>
							</div>
							<div class="form-group" ng-if="designMethod == 2">
								<label class="control-label col-sm-2">底部菜单</label>
								<div class="form-controls col-sm-10">
									<table class="table-finish-buttom">
										<col width="75px"/>
										<col width="105"/>
										<col />
										<tr>
											<td>菜单图标</td>
											<td>菜单名字</td>
											<td>菜单链接模块</td>
										</tr>
										<tr ng-repeat="menu in wxappinfo.quickmenu.menus">
											<td ng-style="{'background-color' : wxappinfo.quickmenu.bottom.bgcolor}">
												<img ng-src="{{menu.defaultImage}}" alt="" width="48px" height="48px"/>
											</td>
											<td ng-bind="menu.name"></td>
											<td ng-bind="menu.module.title"></td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<nav class="navbar navbar-wxapp-bottom navbar-fixed-bottom" role="navigation">
			<div class="container">
				<div class="pager">
					<a type="button" class="btn btn-primary" ng-show="createStep != 1" ng-click="prevStep()">上一步</a>
					<a type="button" class="btn btn-primary" ng-show="createStep != 4" ng-click="nextStep()">下一步</a>
					<button type="submit" name="submit" value="yes" class="btn btn-danger" ng-show="createStep == 4" ng-disabled="submitDisabled">生成版本</button>
					<!-- <a type="button" class="btn btn-default" ng-show="createStep == 4">首页预览</a> -->
				</div>
			</div>
		</nav>
	</form>
</div>
<script>
require(['fileUploader','underscore'], function(uploader){
	var isedit = {$isedit};
	var wxappinfo = {'name' : '{$wxapp_info['name']}'};
	if (isedit) {
		wxappinfo.modules = {php echo json_encode($wxapp_version['modules'])};
		wxappinfo.quickmenu = {php echo json_encode($wxapp_version['quickmenu'])};
		wxappinfo.version = '{$wxapp_version['version']}';
		wxappinfo.description = '{$wxapp_version['description']}';
	}

	angular.module('wxApp').value('config', {
		'wxappinfo' : wxappinfo,
		'uniacid' : "{$uniacid}",
		'version_id' : "{$version_id}",
		'create_type' : "{$create_type}",
		'isedit' : isedit,
		'designMethod' : "{$design_method}",
		'bindingsUrl' : "{php echo url('wxapp/post/module_binding')}",
		'wxappPostUrl' : "{php echo url('wxapp/post', array('design_method' => $design_method, 'create_type'=>$create_type, 'version_id' => $version_id))}",
		'token' : "{$_W['token']}",
	});
	angular.bootstrap($('#js-wxapp-create'), ['wxApp']);
});
</script>
</html>